<script setup lang="ts">
import { reactive, ref } from "vue";
import PageTabBar from "@/components/PageTabBar.vue";
import SmartForm from "@/components/SmartForm/index.vue";
const formRef = ref();
const mode: any = ref("edit");
const handleSubmit = async () => {
  const res = await formRef.value.submit();
  console.log(res, "123");
};
const list = reactive([
  {
    controlId: "create2c086515-b527-4561-8cf3-39424cc2923a",
    controlAttr: {
      placeholder: "请输入",
      colValue: 24,
      defaultValueType: "custom",
      defaultValue: "",
      required: true,
    },
    controlType: "text",
    controlName: "单行文本",
    controlPath: "Text/1.0",
  },
  {
    controlId: "createc62ee3c2-a394-4a0b-9ab8-f124871d49a2",
    controlAttr: {
      placeholder: "请选择",
      colValue: 24,
      defaultValueType: "custom",
      dataConfig: {
        type: "custom",
        options: [
          { label: "选项1", value: "1" },
          { label: "选项2", value: "2" },
          { label: "选项3", value: "3" },
        ],
      },
    },
    controlType: "select",
    controlName: "下拉单选",
    controlPath: "Text/1.0",
  },
  {
    controlId: "createa9afebae-6798-4ecb-b5cc-ade06fa1b4d5",
    controlAttr: {
      placeholder: "请输入",
      colValue: 24,
      defaultValueType: "custom",
      defaultValue: "",
    },
    controlType: "phone",
    controlName: "手机号",
    controlPath: "Phone/1.0",
  },
  {
    controlId: "createa9afebae-6798-4ec2b-b5cc-ade06fa1b4d5",
    controlAttr: {
      placeholder: "请输入",
      colValue: 24,
      defaultValueType: "custom",
      defaultValue: "",
    },
    controlType: "phone",
    controlName: "昵称",
    controlPath: "Phone/1.0",
  },
  {
    controlId: "createa9afebae-6798-4ecb3-b5cc-ade06fa1b4d5",
    controlAttr: {
      placeholder: "请输入",
      colValue: 24,
      defaultValueType: "custom",
      defaultValue: "",
    },
    controlType: "phone",
    controlName: "用户名",
    controlPath: "Phone/1.0",
  },
  {
    controlId: "createa9afebae-67928-4ecb-b5cc-ade06fa1b4d5",
    controlAttr: {
      placeholder: "请输入",
      colValue: 24,
      defaultValueType: "custom",
      defaultValue: "",
    },
    controlType: "phone",
    controlName: "邮箱",
    controlPath: "Phone/1.0",
  },
]) as API.Form.ControlItem[];
</script>

<template>
  <SmartForm v-model:formRef="formRef" :list="list" :mode="mode" />
  <!-- <div class="btn-box">
    <Button round block type="primary" @click="handleSubmit"> 提交 </Button>
  </div> -->
  <div class="btn-box">
    <van-button
      round
      block
      type="primary"
      @click="mode = mode === 'edit' ? 'read' : 'edit'"
    >
      {{ mode === "edit" ? "提交" : "提交" }}
    </van-button>
  </div>
  <PageTabBar />
</template>

<style scoped lang="scss">
.btn-box {
  margin: 32px;
}
</style>
